
<template>
  <div>
    <el-input
      v-model="query.id"
      placeholder="id"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.equipmentName"
      placeholder="设备名称"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.organization"
      placeholder="所属机构"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.groupName"
      placeholder="所属分组"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.mac"
      placeholder="mac地址"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.resolutionRatio"
      placeholder="分辨率"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.status"
      placeholder="设备状态"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.systemUpgrade"
      placeholder="系统升级"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.currentPlan"
      placeholder="当前计划"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.equipmentModel"
      placeholder="设备型号"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.ip"
      placeholder="设备ip"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.ram"
      placeholder="运行内存"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.storage"
      placeholder="存储空间"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.version"
      placeholder="系统版本"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.sendingVersion"
      placeholder="信发版本"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.wirelessMac"
      placeholder="无线mac地址"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.sn"
      placeholder="sn"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.activationTime"
      placeholder="激活时间"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.groupId"
      placeholder="分组id"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.installationPosition"
      placeholder="安装位置"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.registrationTime"
      placeholder="注册时间"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.screenDisplayMode"
      placeholder="屏显方式"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.equipmentRunDuration"
      placeholder="设备运行时长"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.lastHeartbeat"
      placeholder="最后心跳时间"
      class="handle-input"
    ></el-input>
    <el-input
      v-model="query.deviceId"
      placeholder="device_id"
      class="handle-input"
    ></el-input>
    <el-button type="primary" icon="el-icon-search" @click="handleSearch"
      >搜索</el-button
    >
    <el-form
      :inline="true"
      :model="submitData"
      class="demo-form-inline"
      :rules="rules"
      ref="ruleForm"
    >
      <el-card class="box-card">
        <div class="header clearfix">
          <span>equipment</span>
          <!-- v-if="!ischeck && !isFind" -->
          <el-button
            v-if="!ischeck && !isFind"
            class="fr"
            type="primary"
            @click="validate('ruleForm')"
            >提交</el-button
          >
          <el-button v-else class="fr" type="primary" @click="goBack"
            >返回</el-button
          >
        </div>
        <el-form-item label="id" prop="id">
          <el-input placeholder="请输入id" v-model="formData.id"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="equipmentName">
          <el-input
            placeholder="请输入设备名称"
            v-model="formData.equipmentName"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属机构" prop="organization">
          <el-input
            placeholder="请输入所属机构"
            v-model="formData.organization"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分组" prop="groupName">
          <el-input
            placeholder="请输入所属分组"
            v-model="formData.groupName"
          ></el-input>
        </el-form-item>
        <el-form-item label="mac地址" prop="mac">
          <el-input
            placeholder="请输入mac地址"
            v-model="formData.mac"
          ></el-input>
        </el-form-item>
        <el-form-item label="分辨率" prop="resolutionRatio">
          <el-input
            placeholder="请输入分辨率"
            v-model="formData.resolutionRatio"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备状态" prop="status">
          <el-input
            placeholder="请输入设备状态"
            v-model="formData.status"
          ></el-input>
        </el-form-item>
        <el-form-item label="系统升级" prop="systemUpgrade">
          <el-input
            placeholder="请输入系统升级"
            v-model="formData.systemUpgrade"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前计划" prop="currentPlan">
          <el-input
            placeholder="请输入当前计划"
            v-model="formData.currentPlan"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备型号" prop="equipmentModel">
          <el-input
            placeholder="请输入设备型号"
            v-model="formData.equipmentModel"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备ip" prop="ip">
          <el-input placeholder="请输入设备ip" v-model="formData.ip"></el-input>
        </el-form-item>
        <el-form-item label="运行内存" prop="ram">
          <el-input
            placeholder="请输入运行内存"
            v-model="formData.ram"
          ></el-input>
        </el-form-item>
        <el-form-item label="存储空间" prop="storage">
          <el-input
            placeholder="请输入存储空间"
            v-model="formData.storage"
          ></el-input>
        </el-form-item>
        <el-form-item label="系统版本" prop="version">
          <el-input
            placeholder="请输入系统版本"
            v-model="formData.version"
          ></el-input>
        </el-form-item>
        <el-form-item label="信发版本" prop="sendingVersion">
          <el-input
            placeholder="请输入信发版本"
            v-model="formData.sendingVersion"
          ></el-input>
        </el-form-item>
        <el-form-item label="无线mac地址" prop="wirelessMac">
          <el-input
            placeholder="请输入无线mac地址"
            v-model="formData.wirelessMac"
          ></el-input>
        </el-form-item>
        <el-form-item label="sn" prop="sn">
          <el-input placeholder="请输入sn" v-model="formData.sn"></el-input>
        </el-form-item>
        <el-form-item label="激活时间" prop="activationTime">
          <el-input
            placeholder="请输入激活时间"
            v-model="formData.activationTime"
          ></el-input>
        </el-form-item>
        <el-form-item label="分组id" prop="groupId">
          <el-input
            placeholder="请输入分组id"
            v-model="formData.groupId"
          ></el-input>
        </el-form-item>
        <el-form-item label="安装位置" prop="installationPosition">
          <el-input
            placeholder="请输入安装位置"
            v-model="formData.installationPosition"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册时间" prop="registrationTime">
          <el-input
            placeholder="请输入注册时间"
            v-model="formData.registrationTime"
          ></el-input>
        </el-form-item>
        <el-form-item label="屏显方式" prop="screenDisplayMode">
          <el-input
            placeholder="请输入屏显方式"
            v-model="formData.screenDisplayMode"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备运行时长" prop="equipmentRunDuration">
          <el-input
            placeholder="请输入设备运行时长"
            v-model="formData.equipmentRunDuration"
          ></el-input>
        </el-form-item>
        <el-form-item label="最后心跳时间" prop="lastHeartbeat">
          <el-input
            placeholder="请输入最后心跳时间"
            v-model="formData.lastHeartbeat"
          ></el-input>
        </el-form-item>
        <el-form-item label="device_id" prop="deviceId">
          <el-input
            placeholder="请输入device_id"
            v-model="formData.deviceId"
          ></el-input>
        </el-form-item>
      </el-card>
    </el-form>

    <div class="container">
      <el-button @click="loadList">刷新</el-button>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column
          prop="equipmentName"
          label="设备名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="organization"
          label="所属机构"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="groupName"
          label="所属分组"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="mac"
          label="mac地址"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="resolutionRatio"
          label="分辨率"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="设备状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="systemUpgrade"
          label="系统升级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="currentPlan"
          label="当前计划"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="equipmentModel"
          label="设备型号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ip"
          label="设备ip"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ram"
          label="运行内存"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="storage"
          label="存储空间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="version"
          label="系统版本"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sendingVersion"
          label="信发版本"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="wirelessMac"
          label="无线mac地址"
          align="center"
        ></el-table-column>
        <el-table-column prop="sn" label="sn" align="center"></el-table-column>
        <el-table-column
          prop="activationTime"
          label="激活时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="groupId"
          label="分组id"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="installationPosition"
          label="安装位置"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="registrationTime"
          label="注册时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="screenDisplayMode"
          label="屏显方式"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="equipmentRunDuration"
          label="设备运行时长"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="lastHeartbeat"
          label="最后心跳时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deviceId"
          label="device_id"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template v-slot="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pageParam.pageIndex"
          :page-size="pageParam.pageSize"
          :total="pageTotal"
          @current-change="load"
        >
        </el-pagination>
      </div>

      <el-dialog
        class="edit-dialog"
        title="编辑"
        v-model="editVisible"
        width="30%"
      >
        <el-form ref="formEdit" :model="formEdit" label-width="110px">
          <el-form-item label="id">
            <el-input v-model="formEdit.id"></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="formEdit.equipmentName"></el-input>
          </el-form-item>
          <el-form-item label="所属机构">
            <el-input v-model="formEdit.organization"></el-input>
          </el-form-item>
          <el-form-item label="所属分组">
            <el-input v-model="formEdit.groupName"></el-input>
          </el-form-item>
          <el-form-item label="mac地址">
            <el-input v-model="formEdit.mac"></el-input>
          </el-form-item>
          <el-form-item label="分辨率">
            <el-input v-model="formEdit.resolutionRatio"></el-input>
          </el-form-item>
          <el-form-item label="设备状态">
            <el-input v-model="formEdit.status"></el-input>
          </el-form-item>
          <el-form-item label="系统升级">
            <el-input v-model="formEdit.systemUpgrade"></el-input>
          </el-form-item>
          <el-form-item label="当前计划">
            <el-input v-model="formEdit.currentPlan"></el-input>
          </el-form-item>
          <el-form-item label="设备型号">
            <el-input v-model="formEdit.equipmentModel"></el-input>
          </el-form-item>
          <el-form-item label="设备ip">
            <el-input v-model="formEdit.ip"></el-input>
          </el-form-item>
          <el-form-item label="运行内存">
            <el-input v-model="formEdit.ram"></el-input>
          </el-form-item>
          <el-form-item label="存储空间">
            <el-input v-model="formEdit.storage"></el-input>
          </el-form-item>
          <el-form-item label="系统版本">
            <el-input v-model="formEdit.version"></el-input>
          </el-form-item>
          <el-form-item label="信发版本">
            <el-input v-model="formEdit.sendingVersion"></el-input>
          </el-form-item>
          <el-form-item label="无线mac地址">
            <el-input v-model="formEdit.wirelessMac"></el-input>
          </el-form-item>
          <el-form-item label="sn">
            <el-input v-model="formEdit.sn"></el-input>
          </el-form-item>
          <el-form-item label="激活时间">
            <el-input v-model="formEdit.activationTime"></el-input>
          </el-form-item>
          <el-form-item label="分组id">
            <el-input v-model="formEdit.groupId"></el-input>
          </el-form-item>
          <el-form-item label="安装位置">
            <el-input v-model="formEdit.installationPosition"></el-input>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-input v-model="formEdit.registrationTime"></el-input>
          </el-form-item>
          <el-form-item label="屏显方式">
            <el-input v-model="formEdit.screenDisplayMode"></el-input>
          </el-form-item>
          <el-form-item label="设备运行时长">
            <el-input v-model="formEdit.equipmentRunDuration"></el-input>
          </el-form-item>
          <el-form-item label="最后心跳时间">
            <el-input v-model="formEdit.lastHeartbeat"></el-input>
          </el-form-item>
          <el-form-item label="device_id">
            <el-input v-model="formEdit.deviceId"></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button
            @click="
              editVisible = false;
              getData();
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import method from "@/utils/method";
// import Axios from "axios";
import axios from "axios";
import Commen from "../utils/common";
// import Common from "@/common/common";

export default {
  name: "EquipmentTable",
  components: {},
  data() {
    //   Commen
    return {
        submitData:{},
      ischeck: false,
      isFind: false,
      formData: {
        id: "",
        equipmentName: "",
        organization: "",
        groupName: "",
        mac: "",
        resolutionRatio: "",
        status: "",
        systemUpgrade: "",
        currentPlan: "",
        equipmentModel: "",
        ip: "",
        ram: "",
        storage: "",
        version: "",
        sendingVersion: "",
        wirelessMac: "",
        sn: "",
        activationTime: "",
        groupId: "",
        installationPosition: "",
        registrationTime: "",
        screenDisplayMode: "",
        equipmentRunDuration: "",
        lastHeartbeat: "",
        deviceId: "",
      },
      value: "选项1",
      editVisible: false,
      form: [],
      formEdit: [],
      query: {
        uname: "",
        pname: "",
        pageIndex: 1,
        pageSize: 10,
      },
      pageParam: {
        pageNumber: 0,
        pageSize: 10,
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },
      sortOptions: [
        { label: "ID Ascending", key: "+id" },
        { label: "ID Descending", key: "-id" },
      ],
      statusOptions: ["published", "draft", "deleted"],
      showReviewer: false,
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published",
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "Edit",
        create: "Create",
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" },
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change",
          },
        ],
        title: [
          { required: true, message: "title is required", trigger: "blur" },
        ],
      },
      downloadLoading: false,
      tableData: [],
      pageTotal: 0,
    };
  },
  created() {
    this.loadList();
  },
  methods: {
    editCancel() {
      this.editVisible = false;
      // getData()
      this.loadList();
    },

    handleEdit(index, row) {
      this.idx = index;
      // this.form = row;
      this.formEdit = row;
      this.editVisible = true;
    },
    handleSearch(){
this.  loadList()
    },
    saveEdit() {
      // Commen.baseURL
      axios
        .post(Commen.baseURL + "/equipment/save", this.formEdit)
        //   method
        //     .post("equipment/save", this.formEdit, this)
        .then((response) => {
          this.editVisible = false;
          this.loadList();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleDelete(index, row) {
      let params = { id: row.id };
      let data = {};
      let url = "equipment/delete";
      axios({
        url: url,
        method: "post",
        data: data, // body参数
        params: params, // query参数
      })
        // axios.post("equipment/delete",{ id: row.id })
        //   method
        //     .postWithParams("equipment/delete", {}, { id: row.id }, this)
        .then((response) => {
          this.loadList();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    validate(ruleForm) {
      method
        .post("equipment/save", this.formData, this)
        .then((response) => {
          console.log("response");
          console.log(response);
          this.$message.success("提交成功！");
          this.loadList();
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("提交失败！" + error);
        });
    },
    loadList() {
        console.log("loadList");
      let params = this.pageParam;
      let data = {};
      let url = Commen.baseURL+ "/equipment/list";
      axios({
        url: url,
        method: "post",
        data: data, // body参数
        params: params, // query参数
      })
        //   method
        // .postWithParams("equipment/list", {}, this.pageParam, this)
        .then((response) => {
            console.log(response);
        //   let content = response.data.content;
           let content = response.data.data.content;
        //   console.log();
          this.tableData = content;
          console.log("this.tableData ");
            console.log(this.tableData );
          // this.pageTotal = response.data.pageable.pageSize;
          this.pageTotal = response.data.totalElements;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadById(id) {
      method
        .postWithParams("equipment/load", {}, id, this)
        .then((response) => {
          let content = response.data.content;
          this.tableData = content;
          this.pageTotal = response.data.totalElements;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    load(val) {
      this.pageParam.pageNumber = val - 1;
      this.loadList();
    },
  },
};
</script>

<style scoped>
.pagination {
  margin: 20px 0;
  text-align: right;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>